<template> 
    <div>
        <!-- 权限设置对话框 -->
        <el-dialog
            title="权限设置"
            v-model="permissionDialogVisible"
            width="700px"
            :close-on-click-modal="false"
            >
            <div class="permission-container">
                <el-tree
                ref="menuTreeRef"
                :data="menuTreeData"
                show-checkbox
                node-key="id"
                :props="treeProps"
                :default-checked-keys="checkedMenuKeys"
                :check-strictly="isCheckStrictly"
                @check="handleCheck"
                />
            </div>
            <template #footer>
                <el-button @click="permissionDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSavePermission" :loading="submitting">
                保存
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>


<script setup lang="ts">
import type { RoleItem, MenuItem } from '@/types/role'
import { ElMessage, type ElTree } from 'element-plus'
import { getMenuTree,updateRole3, getRoleDetailFind } from '@/api/role'
import { ref, onMounted, nextTick, defineProps, defineEmits, watch } from 'vue'

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  tenantId: {
    type: [Number, String],
    default: 0
  }
})

// 定义 emits
const emit = defineEmits(['update:visible'])

const currentRole = ref<RoleItem>()
const menuTreeData = ref<MenuItem[]>([])
const permissionDialogVisible = ref(false)
const submitting = ref(false)
const menuTreeRef = ref<InstanceType<typeof ElTree>>()

// 在现有代码中添加一个新的属性配置
const treeProps = {
  children: 'children',
  label: 'title'
}

const checkedMenuKeys = ref<number[]>([])

// 监听 visible 属性变化
watch(
  () => props.visible,
  (newVal) => {
    permissionDialogVisible.value = newVal
    if (newVal && props.tenantId) {
      // 当对话框打开且有租户ID时，加载权限数据
      loadPermissionData(props.tenantId)
    }
  }
)

// 监听内部状态变化并通知父组件
watch(
  () => permissionDialogVisible.value,
  (newVal) => {
    emit('update:visible', newVal)
    if (!newVal) {
      // 对话框关闭时重置状态
      currentRole.value = undefined
      checkedMenuKeys.value = []
    }
  }
)

// 加载指定租户的权限数据
const loadPermissionData = async (tenantId: number | string) => {
  try {
    // 这里需要根据实际 API 调用来加载租户权限
    // 示例代码，您需要根据实际情况调整
    console.log('加载租户权限数据，租户ID:', tenantId)
    
    // 如果您有获取租户详情的 API，可以在这里调用
    // const detail = await getTenantDetail(tenantId)
    const detail = await getRoleDetailFind(2,tenantId)
    checkedMenuKeys.value = detail.data.menu_ids || []
    
    // 临时示例：设置空的权限列表
    // checkedMenuKeys.value = []
    isCheckStrictly.value = true
    nextTick(() => {
      if (menuTreeRef.value) {
        menuTreeRef.value.setCheckedKeys(checkedMenuKeys.value)
      }
    })
  } catch (error) {
    console.error('获取租户权限失败:', error)
    ElMessage.error('获取租户权限失败')
  }
}





// 加载菜单树
const loadMenuTree = async () => {
  try {
    
    console.log('开始加载菜单树...')
    const result = await getMenuTree()
    console.log('菜单树原始数据:', result)
    
    // 确保数据结构正确
    menuTreeData.value = Array.isArray(result.data) ? result.data : []
    
    if (menuTreeData.value.length === 0) {
      console.warn('菜单树数据为空')
      ElMessage.warning('菜单数据为空，请检查后端接口')
    } else {
      console.log('菜单树加载成功，数据条数:', menuTreeData.value.length)
    }
  } catch (error) {
    console.error('加载菜单树失败:', error)
    ElMessage.error('加载菜单权限失败')
  }
}


// 修改 handleSavePermission 方法
const handleSavePermission = async () => {
  if (!menuTreeRef.value || !props.tenantId) return

  try {
    submitting.value = true
    
    const checkedKeys = menuTreeRef.value.getCheckedKeys(false) as number[]
    const halfCheckedKeys = menuTreeRef.value.getHalfCheckedKeys() as number[]
    const menuIds = [...checkedKeys, ...halfCheckedKeys]

    // 这里需要调用保存租户权限的 API
    // 示例代码，您需要根据实际情况调整
    // console.log('保存租户权限，租户ID:', props.tenantId, '菜单IDs:', menuIds)
    
    // 示例 API 调用（需要根据您的实际 API 调整）
    await updateRole3(props.tenantId, menuIds)
    
    ElMessage.success('权限设置成功')
    permissionDialogVisible.value = false
  } catch (error) {
    console.error('保存权限失败:', error)
    ElMessage.error('保存权限失败')
  } finally {
    submitting.value = false
  }
}

const isCheckStrictly = ref(true) // 初始为严格模式用于回显

// 处理复选框点击事件
const handleCheck = () => {
  // 确保在非严格模式下进行选择
  isCheckStrictly.value = false
}

// 初始化数据
onMounted(() => {
  loadMenuTree()
})
</script>